import ComponentCodePreview from "@/components/app/component-code-preview"
import { generateMetadata } from "../utils/metadata"
import { ChainOfThoughtBasic } from "./chain-of-thought-basic"
import { ChainOfThoughtAdvanced } from "./chain-of-thought-advanced"

export const metadata = generateMetadata(
  "Chain of Thought",
  "Display step-by-step reasoning and collapsible thought processes in AI interfaces."
)

# Chain of Thought

Display step-by-step reasoning and collapsible thought processes in AI interfaces

## Examples

### Basic chain of thought

<ComponentCodePreview
  component={<ChainOfThoughtBasic />}
  filePath="app/docs/chain-of-thought/chain-of-thought-basic.tsx"
  classNameComponentContainer="p-8"
/>

### Advanced reasoning steps

<ComponentCodePreview
  component={<ChainOfThoughtAdvanced />}
  filePath="app/docs/chain-of-thought/chain-of-thought-advanced.tsx"
  classNameComponentContainer="p-8"
/>

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>

<TabsContent value="cli">

<CodeBlock
  code={`npx shadcn add "https://prompt-kit.com/c/chain-of-thought.json"`}
  language="bash"
/>

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<CodeBlock filePath="components/prompt-kit/chain-of-thought.tsx" language="tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Component API

### ChainOfThought

| Prop      | Type            | Default | Description                                  |
| :-------- | :-------------- | :------ | :------------------------------------------- |
| children  | React.ReactNode |         | ChainOfThoughtStep components                |
| className | string          |         | Additional CSS classes                       |

### ChainOfThoughtStep

| Prop      | Type                                    | Default | Description                                         |
| :-------- | :-------------------------------------- | :------ | :--------------------------------------------------- |
| children  | React.ReactNode                         |         | ChainOfThoughtTrigger and ChainOfThoughtContent     |
| className | string                                  |         | Additional CSS classes                               |
| isLast    | boolean                                 | false  | Whether this is the last step in the chain          |
| ...props  | React.ComponentProps\<typeof Collapsible\> |         | Additional collapsible props                         |

### ChainOfThoughtTrigger

| Prop            | Type                    | Default | Description                                    |
| :-------------- | :---------------------- | :------ | :---------------------------------------------- |
| children        | React.ReactNode         |         | Trigger content                                 |
| leftIcon        | React.ReactNode         |         | Icon displayed before the trigger text         |
| swapIconOnHover | boolean                 | true   | Whether to swap icon on hover                   |
| className       | string                  |         | Additional CSS classes                          |
| ...props        | React.ComponentProps\<typeof CollapsibleTrigger\> |         | Additional collapsible trigger props            |

### ChainOfThoughtContent

| Prop      | Type                                      | Default | Description                              |
| :-------- | :---------------------------------------- | :------ | :--------------------------------------- |
| children  | React.ReactNode                           |         | Content displayed when expanded          |
| className | string                                    |         | Additional CSS classes                   |
| ...props  | React.ComponentProps\<typeof CollapsibleContent\> |         | Additional collapsible content props     |

### ChainOfThoughtItem

| Prop      | Type                              | Default | Description                              |
| :-------- | :-------------------------------- | :------ | :--------------------------------------- |
| children  | React.ReactNode                   |         | Item content                             |
| className | string                            |         | Additional CSS classes                   |
| ...props  | React.ComponentProps\<"div"\>     |         | Additional div props                     |
